<%@page import="cn.edu.pku.wxlib.periodical.model.*"%>

<%@ page contentType="text/html;charset=UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib tagdir="/WEB-INF/tags/simpletable" prefix="simpletable"%>
<%@ include file="/commons/taglibs.jsp"%>

<rapid:override name="head">
	<title>期刊信息维护</title>

	<script src="${ctx}/scripts/rest.js"></script>
	<link href="<c:url value="/widgets/simpletable/simpletable.css"/>"
		type="text/css" rel="stylesheet">
	<script type="text/javascript"
		src="<c:url value="/widgets/simpletable/simpletable.js"/>"></script>

	<script type="text/javascript">
		$(document).ready(function() {
			window.simpleTable = new SimpleTable('queryForm',${page.thisPageNumber},${page.pageSize},'${pageRequest.sortColumns}');
		});
	</script>
</rapid:override>

<rapid:override name="content">
	<form id="queryForm" name="queryForm" method="get"
		style="display: inline;">
		<div class="search">
			<div class="form-group inline icon">
				<i class="icon-list"></i> <input placeholder="输入ISSN号"
					value="${query.issn}" id="issn" name="issn" maxlength="13"
					class="form-field col-1" />
			</div>
			<%-- <div class="form-group inline icon">
				<i class="icon-list"></i> <input placeholder="输入邮发代号"
					value="${query.postCode}" id="postCode" name="postCode"
					maxlength="6" class="form-field" /> <br />
			</div> --%>
			<div class="form-group inline icon">
				<i class="icon-list"></i> <input placeholder="输入期刊名称"
					value="${query.periodicalName}" id="periodicalName"
					name="periodicalName" maxlength="64" class="form-field col-1" />
			</div>
			<%-- <div class="form-group inline icon">
				<i class="icon-list"></i> <input placeholder="输入出版周期"
					value="${query.frequency}" id="frequency" name="frequency"
					maxlength="10" class="form-field" />
				<!--[1旬刊/2半月刊/3月刊/4双月刊/5季刊/6半年刊/7年刊]-->
				<br />
			</div>
			<div class="form-group inline icon">
				<i class="icon-list"></i> <input placeholder="输入卷"
					value="${query.volume}" id="volume" name="volume" maxlength="10"
					class="form-field" /> <br />
			</div>
			<div class="form-group inline icon">
				<i class="icon-list"></i> <input placeholder="输入年"
					value="${query.year}" id="year" name="year" maxlength="10"
					class="form-field" /> <br />
			</div> --%>
			<div class="form-group inline icon">
				<i class="icon-list"></i> <input placeholder="输入期"
					value="${query.period}" id="period" name="period" maxlength="10"
					class="form-field col-1" />
			</div>
			<div class="form-group inline icon">
				<i class="icon-list"></i> <input placeholder="输入出版社"
					value="${query.publisher}" id="publisher" name="publisher"
					maxlength="64" class="form-field col-1" />
			</div>
			<%-- <div class="form-group inline icon">
				<i class="icon-list"></i> <input placeholder="输入简介"
					value="${query.brief}" id="brief" name="brief" maxlength="1024"
					class="form-field" /> <br />
			</div>
			<div class="form-group inline icon">
				<i class="icon-list"></i> <input placeholder="输入价格"
					value="${query.price}" id="price" name="price" maxlength="10"
					class="form-field" /> <br />
			</div>
			<div class="form-group inline icon">
				<i class="icon-list"></i> <input placeholder="输入语言"
					value="${query.language}" id="language" name="language"
					maxlength="32" class="form-field" /> <br />
			</div>
			<div class="form-group inline icon">
				<i class="icon-list"></i> <input placeholder="输入imageUrl"
					value="${query.imageUrl}" id="imageUrl" name="imageUrl"
					maxlength="128" class="form-field" /> <br />
			</div> --%>

			<div class="form-group inline icon">
				<i class="icon-list"></i> <input placeholder="输入分类"
					value="${query.categoryId}" id="categoryId" name="categoryId"
					maxlength="10" class="form-field col-1" />
			</div>
			<%-- <div class="form-group inline icon">
				<i class="icon-list"></i> <input placeholder="输入书架ID"
					value="${query.shelfId}" id="shelfId" name="shelfId" maxlength="10"
					class="form-field" /> <br />
			</div>
			<div class="form-group inline icon">
				<i class="icon-list"></i> <input placeholder="狀態：1在架2下架3报废"
					value="${query.state}" id="state" name="state" maxlength="10"
					class="form-field" /> <br />
			</div>
			<div class="form-group inline icon">
				<i class="icon-list"></i> <input placeholder="输入入库数量"
					value="${query.totalNumber}" id="totalNumber" name="totalNumber"
					maxlength="10" class="form-field" /> <br />
			</div> --%>
			<div class="form-group inline icon">
				<i class="icon-list"></i> <input placeholder="请输入作者"
					value="${query.author}" id="author" name="author" maxlength="128"
					class="form-field col-1" />
			</div>

			<div class="form-group inline icon">
				<i class="icon-calendar"></i> <input placeholder="发行时间开始"
					type="text"
					value="<fmt:formatDate value='${query.publishTimeBegin}' pattern='<%=Periodical.FORMAT_PUBLISH_TIME%>'/>"
					id="publishTimeBegin" name="publishTimeBegin" class="form-field col-1" />
			</div>
			<strong>至</strong>
			<div class="form-group inline icon">
				<i class="icon-calendar"></i> <input placeholder="发行时间结束"
					type="text"
					value="<fmt:formatDate value='${query.publishTimeEnd}' pattern='<%=Periodical.FORMAT_PUBLISH_TIME%>'/>"
					id="publishTimeEnd" name="publishTimeEnd" class="form-field col-1" />
			</div>
			<%-- <div class="form-group inline icon">
				<i class="icon-calendar"></i> <input placeholder="创建时间开始 "
					type="text"
					value="<fmt:formatDate value='${query.createTimeBegin}' pattern='<%=Periodical.FORMAT_CREATE_TIME%>'/>"
					id="createTimeBegin" name="createTimeBegin" class="form-field" />
			</div>
			<strong>至</strong>
			<div class="form-group inline icon">
				<i class="icon-calendar"></i> <input placeholder="创建时间结束"
					type="text"
					value="<fmt:formatDate value='${query.createTimeEnd}' pattern='<%=Periodical.FORMAT_CREATE_TIME%>'/>"
					id="createTimeEnd" name="createTimeEnd" class="form-field" /> <br />
			</div> --%>

			<div class="form-group inline icon search-btn"
				onclick="$('#queryForm').submit();" title="查询">
				<i class="icon-search"></i>
			</div>
		</div>
	</form>

	<div class="handleControl">
		<button type="button" class="btn btn-primary"
			onclick="window.location = '${ctx}/periodical/new'">新增</button>
		<button type="button" class="btn btn-default"
			onclick="doRestBatchDelete('${ctx}/periodical','items',document.forms.queryForm)">删除</button>
	</div>

		<div class="gridTable">
			<table width="100%" border="0" cellspacing="0"
				class="table text-center">
				<thead>
					<tr>
						<th style="width: 1px;"><input type="checkbox"
							onclick="setAllCheckboxState('items',this.checked)"></th>
						<th sortColumn="ISSN">issn</th>
						<!-- <th sortColumn="postCode">邮发代号</th> -->
						<th sortColumn="periodicalName">期刊名称</th>
						<th sortColumn="frequency">出版周期</th>
						<th sortColumn="volume">卷</th>
						<th sortColumn="year">年</th>
						<th sortColumn="period">期</th>
						<th sortColumn="publisher">出版社</th>
						<!-- <th sortColumn="brief">简介</th>
						<th sortColumn="price">价格</th>
						<th sortColumn="language">语言</th> -->
						<th sortColumn="publishTime">发行时间</th>
						<th sortColumn="createTime">创建时间</th>
						<!-- <th sortColumn="categoryId">类型ID</th>
						<th sortColumn="shelfId">书架ID</th>
						<th sortColumn="state">期刊狀態</th>
						<th sortColumn="totalNumber">入库数量</th> -->
						<th sortColumn="author">author</th>
						<!-- <th sortColumn="imageUrl">imageUrl</th>-->						
						<th style="white-space: nowrap;">操作</th>
					</tr>
				</thead>
				<tbody>
					<c:forEach items="${page.result}" var="item" varStatus="status">
						<tr>
							<td><input type="checkbox" name="items"
								value="${item.periodicalId}"></td>
							<td><c:out value='${item.issn}' />&nbsp;</td>
							<%-- <td><c:out value='${item.postCode}' />&nbsp;</td> --%>
							<td><c:out value='${item.periodicalName}' />&nbsp;</td>
							<td><c:out value='${item.frequency}' />&nbsp;</td>
							<td><c:out value='${item.volume}' />&nbsp;</td>
							<td><c:out value='${item.year}' />&nbsp;</td>
							<td><c:out value='${item.period}' />&nbsp;</td>
							<td><c:out value='${item.publisher}' />&nbsp;</td>
							<%-- <td><c:out value='${item.brief}' />&nbsp;</td>
							<td><c:out value='${item.price}' />&nbsp;</td>
							<td><c:out value='${item.language}' />&nbsp;</td> --%>
							<td><c:out value='${item.publishTimeString}' />&nbsp;</td>
							<td><c:out value='${item.createTimeString}' />&nbsp;</td>
							<%-- <td><c:out value='${item.categoryId}' />&nbsp;</td>
							<td><c:out value='${item.shelfId}' />&nbsp;</td>
							<td><c:out value='${item.state}' />&nbsp;</td>
							<td><c:out value='${item.totalNumber}' />&nbsp;</td> --%>
							<td><c:out value='${item.author}' />&nbsp;</td>
							<%-- <td><c:out value='${item.imageUrl}' />&nbsp;</td> --%>
							<td><a href="${ctx}/periodical/${item.periodicalId}" class="operation">查看</a>&nbsp;&nbsp;
								<a href="${ctx}/periodical/${item.periodicalId}/edit" class="operation">修改</a>&nbsp;&nbsp;
								<a href="${ctx}/periodical/${item.periodicalId}"
								onclick="doRestDelete(this,'你确认删除?');return false;" class="operation">删除</a></td>
						</tr>

					</c:forEach>
				</tbody>
			</table>

			<simpletable:pageToolbar page="${page}">
			</simpletable:pageToolbar>

		</div>
</rapid:override>
<rapid:override name="script">
	<script>
	var picker1 = new Pikaday(
		    {
		        field: document.getElementById('publishTimeBegin'),
		        firstDay: 1,
		        minDate: new Date('1900-01-01'),
		        maxDate: new Date('2020-12-31'),
		        yearRange: [1900,2020]
		    });
		    
	var picker2 = new Pikaday(
		    {
		        field: document.getElementById('publishTimeEnd'),
		        firstDay: 1,
		        minDate: new Date('1900-01-01'),
		        maxDate: new Date('2020-12-31'),
		        yearRange: [1900,2020]
		    });
	var picker3 = new Pikaday(
		    {
		        field: document.getElementById('createTimeBegin'),
		        firstDay: 1,
		        minDate: new Date('1900-01-01'),
		        maxDate: new Date('2020-12-31'),
		        yearRange: [1900,2020]
		    });
		    
	var picker4 = new Pikaday(
		    {
		        field: document.getElementById('createTimeEnd'),
		        firstDay: 1,
		        minDate: new Date('1900-01-01'),
		        maxDate: new Date('2020-12-31'),
		        yearRange: [1900,2020]
		    });
	</script>
</rapid:override>
<%@ include file="base.jsp"%>
